<template>
	<div class="page">
		<div class="wos-menu wos-hand" >
			<div :class="menu === '网卡设置' ? 'active' : '' " @click="menu = '网卡设置'">网卡设置</div>
			<div :class="menu === 'P2P' ? 'active' : '' " @click="menu = 'P2P'">P2P</div>
		</div>
		<div v-show="menu === '网卡设置'">
			<div class="content">
				<wos-table :record="datas" :tfood="datas.tfood"></wos-table>
			</div>
			<div class="content">
				<div class="wos-flex mb-20">
					<div class="wos-form-title">IP版本</div>
					<div class="mr-10">
						<select class="wos-input wos-select">
							<option value="">IPv4</option>
							<option value="">IPv6</option>
						</select>
					</div>
					<div class="wos-form-title">首选DNS服务器</div>
					<div class="mr-10">
						<ip-input value="8.8.8.8"></ip-input>
					</div>
					<div class="wos-form-title">备用DNS服务器</div>
					<div class="mr-10">
						<ip-input value="8.8.8.8"></ip-input>
					</div>
				</div>
				<div class="wos-flex mb-20">
					<div class="wos-form-title">IP版本</div>
					<div class="mr-10">
						<select class="wos-input wos-select">
							<option value="">IPv4</option>
							<option value="">IPv6</option>
						</select>
					</div>
					<div class="wos-flex">
						<div class="mr-10"><input type="checkbox"></div>
						<div>网络高速下载</div>
					</div>

				</div>
			</div>
		</div>

		<div v-show="menu === 'P2P'">
			<div style="margin: 40px; height: 700px">
				<div class="mb-20">
					<input type="checkbox"> &nbsp; &nbsp; 启用
				</div>
				<div style="width: 500px" class="mb-20">
					为帮助您在移动端远程管理设备，P2P功能会开启。设备开启P2P功能并连接互联网后，我们会收集设备IP地址、设备MAC地址、设备名称、设备序列号等设备信息。收集的信息仅用于实现远程访问设备。如您不同意开启以上功能，请取消勾选框的勾选
				</div>
				<div class="wos-flex mb-20">
					<div class="wos-form-title">状态</div>
					<div><input type="text" disabled class="wos-input"></div>
				</div>
				<div class="wos-flex mb-20">
					<div class="wos-form-title">序列号</div>
					<div><input type="text" disabled class="wos-input"></div>
				</div>
			</div>
		</div>

		<div class="console">
			<div v-show="menu === '网卡设置'">
				<button >默认</button>
				<button class="active">确定</button>
				<button >刷新</button>
			</div>
			<div v-show="menu === 'P2P'">
				<button class="active">确定</button>
				<button >刷新</button>
			</div>
		</div>
	</div>
</template>

<script>
    export default {
        name: "netcard",
	    data:function(){
            return {
                menu:"网卡设置",
                datas:""
            }
	    },
        beforeMount() {
            this.getData()
        },
        methods:{
            getData(){
                let that = this
                this.axios.get('/api/configure/netcard.json')
                    .then(function (response) {
                        if( response.data.code == 200) {
                            that.datas = response.data.data
                        }
                    })
                    .catch(function (error) {
                        that.$message.warn('服务器连接超时，请稍后重试')
                    });
            }
        }
    }
</script>

<style scoped>

</style>
